﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollView.aspx.cs" Inherits="ZLCMS.Web.Wap.Example.ScrollView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
	<link rel="stylesheet" href="/wap/lib/jquerymobile/css/jquery.mobile-1.4.0.min.css" />
    <link href="/wap/lib/jquerymobile_scrollview/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/wap/lib/jquerymobile_scrollview/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="/wap/lib/jquery/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="/wap/lib/jquerymobile/jquery.mobile-1.4.0.min.js"></script> 

    <script src="/wap/lib/iscroll.js" type="text/javascript"></script>
    <script src="/wap/lib/jquerymobile_scrollview/jquery.mobile.iscrollview.js" type="text/javascript"></script>

	<script type="text/javascript" src="/wap/lib/jquery/jquery.json-2.2.min.js"></script>
    <script type="text/javascript" src="/wap/lib/command/Command.js"></script>
</head>
<body>
  

<div data-role='page' id='mainPage'>
<div data-role="header" data-position="fixed">
<h1>拖放加载更多</h1>
</div>
<div role="main" class="ui-content">
      <div data-iscroll="" data-role="content">
        
        <div class="iscroll-pulldown">
          <span class="iscroll-pull-icon"></span><span class="iscroll-pull-label"></span>
        </div>
        

        <ul data-role="listview" id="list">
        
        </ul>
        
        <div class="iscroll-pullup" data-tap-toggle="false" data-transition="none">
          <span class="iscroll-pull-icon"></span><span class="iscroll-pull-label" data-iscroll-loading-text="加载中..." data-iscroll-pulled-text="松开加载更多信息">Custom reset text</span>
        </div>
        
        </div>


</div>

<!--footer-->
<div data-role="footer" data-position="fixed">
<h1>页脚</h1>
</div>
</div>
<script type="text/javascript">

    (function shortPullPagePullImplementation($) {
        var listSelector = "#list";
        var lastItemSelector = listSelector + " > li:last-child";

        function loadData(callBack) {
            var pageIndex = $(listSelector).attr('data-pageindex') ? $(listSelector).attr('data-pageindex') : 1;
            var pageSize = $(listSelector).attr('data-pagesize') ? $(listSelector).attr('data-pagesize') : 20;
            var recordCount = $(listSelector).attr('data-recordcount') ? $(listSelector).attr('data-recordcount') : 9999;

            if (recordCount < (pageIndex-1) * pageSize) {
                //没有记录
                callBack();
                return;
            }

            $(listSelector).executeCommand({ successCallBack: function (result, totalCount) {
                $(listSelector).attr('data-pageindex', pageIndex + 1);
                $(listSelector).attr('data-recordcount', totalCount);
                callBack(result);
            }
        }, 'InterfaceExample', { PageIndex: pageIndex, PageSize: pageSize });
        }

        function onPullDown(event, data) {
            loadData(function (list) {
                var html = '';
                $(list).each(function () {
                    html = "<li>" + this + "</li>" + html;
                });
                $(listSelector).prepend(html).listview("refresh");
                data.iscrollview.refresh();
            });
        }

        function onPullUp(event, data) {
            var iscrollview = data.iscrollview;
            loadData(function (list) {
                var html = '';
                $(list).each(function () {
                    html += "<li>" + this + "</li>";
                });
                $(listSelector).append(html).listview("refresh");
                iscrollview.refresh(null, null,
                  $.proxy(function afterRefreshCallback() {
                      this.scrollToElement(lastItemSelector, 200);
                  }, iscrollview));
            });
        }

        $(document).delegate("#mainPage", "pageinit",
            function (event) {
                $(".iscroll-wrapper", this).bind({
                    iscroll_onpulldown: onPullDown,
                    iscroll_onpullup: onPullUp
                });
                loadData(function (list) {
                    var html = '';
                    $(list).each(function () {
                        html += "<li>" + this + "</li>";
                    });
                    $(listSelector).append(html).listview("refresh");
                    data.iscrollview.refresh(); 
                    });
            });

    } (jQuery));

</script>
</body>
</html>
